import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

/**
 * Pinia Store示例 - 01认识piniajs
 * 
 * 这个文件展示了Pinia的基本用法，包含两个Store：
 * 1. 计数器Store (useCounterStore)
 * 2. 用户Store (useUserStore)
 */

// 计数器Store
export const useCounterStore = defineStore('counter', () => {
  // 状态 (State) - 相当于组件中的data
  const count = ref(0)
  
  // 计算属性 (Getters) - 相当于组件中的computed
  const doubleCount = computed(() => count.value * 2)
  
  // 动作 (Actions) - 相当于组件中的methods
  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  function reset() {
    count.value = 0
  }

  // 返回需要暴露的状态和方法
  return { 
    count, 
    doubleCount, 
    increment,
    decrement,
    reset
  }
})

// 用户Store
export const useUserStore = defineStore('user', () => {
  // 状态 (State)
  const username = ref('')
  const isLoggedIn = ref(false)
  const lastLoginTime = ref(null)

  // 计算属性 (Getters)
  const displayName = computed(() => {
    return username.value ? username.value : '未登录用户'
  })

  // 动作 (Actions)
  function setUsername(newUsername) {
    username.value = newUsername
    isLoggedIn.value = true
    lastLoginTime.value = new Date().toLocaleString()
  }

  function logout() {
    username.value = ''
    isLoggedIn.value = false
  }

  // 返回需要暴露的状态和方法
  return { 
    username, 
    isLoggedIn,
    lastLoginTime,
    displayName,
    setUsername, 
    logout 
  }
})
